{% extends "base.html" %} <!-- 声明继承自 base.html -->
{% load static %}
<!-- 自定义页面标题 -->
{% block title %}User List{% endblock %}

{% block style %}
    table {
            width: 100%; /* 可根据需要设置表格宽度，也可以是固定宽度，如 600px */
            table-layout: fixed; /* 固定表格布局，使列宽更易控制，也可根据情况不设置 */
        }
    table td, table th {
        word-wrap: break-word;
        /* 可选：设置单元格内边距等样式，使内容显示更美观 */
        padding: 2px;
        border: 1px solid #ddd;
    }
{% endblock %}
<!-- 填充页面 body 内容 -->
{% block body %}
<!-- 折叠控制器 -->
<p>
    <input type="checkbox" class="btn-check" id="btn-check-outlined1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="btn-check-outlined1" data-bs-toggle="collapse"
           data-bs-target="#active-users"
           aria-expanded="false" aria-controls="active-users">
        用户
    </label>
    <input type="checkbox" class="btn-check" id="btn-check-outlined2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btn-check-outlined2" data-bs-toggle="collapse"
           data-bs-target="#deleted-users"
           aria-expanded="false" aria-controls="deleted-users">
        已删除用户
    </label>
</p>
<!-- 折叠区域 -->
<div class="collapse collapse-horizontal show" id="active-users">
    <div class="card card-body">
        <!-- 未删除的用户信息表格 -->
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">名称</th>
                <th scope="col">创建时间</th>
                <th scope="col">电话号码</th>
                <th scope="col">登录密码</th>
                <th scope="col">权限等级</th>
                <th scope="col">删除</th>
            </tr>
            </thead>
            <tbody>
            {% for item in data.active_users %}
            <tr>
                <th scope="row">{{ item.id }}</th>
                <td>{{ item.name }}</td>
                <td>{{ item.create_time }}</td>
                <td>{{ item.mobile }}</td>
                <td>{{ item.password }}</td>
                {% if item.role == 1 %}
                <td>超级管理员</td>
                {% elif item.role == 2 %}
                <td>用户</td>
                {% endif %}
                <td>
                    <a href="javascript:void(0);" onclick="showUserDeleteConfirmModal('{{ item.user_identity }}', '{{ item.name }}')">
                        <img src="{% static 'img/trash3-fill.svg' %}" alt="删除用户"
                             style="width: 1em; height: 1em; vertical-align: middle; margin-right: 6px;">
                    </a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="collapse collapse-horizontal" id="deleted-users">
    <div class="card card-body">
        <!-- 已删除的用户信息表格 -->
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col" style="width: 5%;">#</th>
                <th scope="col" style="width: 15%;">名称</th>
                <th scope="col" style="width: 15%;">创建时间</th>
                <th scope="col" style="width: 10%;">电话号码</th>
                <th scope="col" style="width: 20%;">登录密码</th>
                <th scope="col" style="width: 10%;">权限等级</th>
                <th scope="col" style="width: 5%;">恢复</th>
            </tr>
            </thead>
            <tbody>
            {% for item in data.deleted_users %}
            <tr>
                <th scope="row">{{ item.id }}</th>
                <td>{{ item.name }}</td>
                <td>{{ item.create_time }}</td>
                <td>{{ item.mobile }}</td>
                <td>{{ item.password }}</td>
                {% if item.role == 1 %}
                <td>超级管理员</td>
                {% elif item.role == 2 %}
                <td>用户</td>
                {% endif %}
                <td>
                    <a href="javascript:void(0);"
                       onclick="showUserRestoreConfirmModal('{{ item.user_identity}}', '{{ item.name}}')">
                        <img src="{% static 'img/bootstrap-reboot.svg' %}" alt="恢复用户"
                             style="width: 1em; height: 1em; vertical-align: middle; margin-right: 6px;">
                    </a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block script %}
<script type="module" src="{% static 'js/userList.js' %}"></script>
{% endblock %}